<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/include/taglib.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<%@ include file="/include/header.jsp" %>
<%@ include file="/include/zTree.jsp" %>
<!-- 校检规则 -->
<script src="${ctx}/js/lib/jquery-ui.custom.js" type="text/javascript"></script>
</head>
<body style="background-color: white;">
    <div style="padding: 10px;">
		<div class="b_box">
		<div class="p_bar"></div>
		<div class="con_box ">
	        <div class="clearfix">
	        <form id="sysDeptForm"  action="post">
				<input type="hidden" name="CSRFToken" value="${csrfToken}" />
				<table class="c_table">
					<tr>
						<td width="150" class="t_r"><b><i class="square"></i>中文名称：</b></td>
						<td width="205"><input type="text" class="input_txt" id="deptCnName" name="deptCnName" value="" data-validaterole="deptCnName" data-rule="deptCnName"  style="width: 200px"/><i class="look"></i></td>
						<td width="120" class="t_r"><b><i class="square"></i>是否虚构：</b></td>
						<td><select  id="isFiction" name="isFiction" style="width:155px;" class="input_txt">
								<c:forEach items="${fictionMap}" var="var" >
									<option value="${var.key }">${var.value}</option>
								</c:forEach>
							</select> 
					   </td>
					</tr>
					<tr>
						<td class="t_r"><b><i class="square"></i>部门简称：</b></td>
						<td><input type="text" class="input_txt" id="deptReferred" name="deptReferred" value="" data-validaterole="deptReferred" data-rule="deptReferred" style="width: 150px"/></td>
						<td class="t_r"><b><i class="square"></i>是否统计：</b></td>
						<td>
								<select  id="isStatistics" name="isStatistics" style="width:155px;" class="input_txt">
								<c:forEach items="${statisticsMap}" var="var" >
									<option value="${var.key }">${var.value}</option>
								</c:forEach>
							</select> 
						
						</td>
					</tr>
					<tr>
						<td class="t_r"><b><i class="square"></i>英文名称：</b></td>
						<td><input  class="input_txt" type="text" id="deptEnName" name="deptEnName" value="${sysDeptShowVo.deptEnName}" data-validaterole="deptEnName" data-rule="deptEnName" style="width: 150px"/></td>
						
					</tr>
					<tr>
					     <td class="t_r"><b><i class="square"></i>上级部门：</b></td>
						<td colspan="3"><input  class="input_txt" type="text" id="parentName" readonly="readonly" style="width: 200px" data-validaterole="parentName"/>
						<a href="javascript:showMenu();">选择</a>&nbsp;&nbsp;<a href="javascript:clear();">清除</a>
						<input type="hidden" name="parentDeptId" id="parentDeptId"/></td>
						<div id="menuContent" class="menuContent" style="display:none; position: absolute;background-color: white;">
							<ul id="treeDemo" class="ztree" style="margin-top:0; width:300px;"></ul>
						</div>
					</tr>
					<tr>
					     <td class="t_r"><b><i class="square"></i>地&nbsp;&nbsp;&nbsp;&nbsp;址：</b></td>
						<td colspan="3"><input type="text" class="input_txt" id="deptAddress" name="deptAddress" value="" data-validaterole="deptAddress" data-rule="deptAddress" style="width: 450px"/></td>
						
					</tr>
					<tr>
						<td class="t_r"><b><i class="square"></i>注&nbsp;&nbsp;&nbsp;&nbsp;释：</b></td>
						<td colspan="3"><textarea id="remark" name="remark" class="input_txt"  style="height:60px;width: 450px"></textarea></td>
					</tr>
				 </table>
				</form>
			</div>
	      </div>
		
	</div>
	<div class="action_box m_t10 t_c"><input type="button" class="a_btn" value="保存" id="addBtn"/></div>
	</div>
	<script type="text/javascript">
		function clear() {
			$("#parentName").val("");
			$("#parentDeptId").val("");
		}
		function showMenu() {
			var cityObj = $("#parentName");
			var cityOffset = $("#parentName").offset();
			$("#menuContent").css({left:cityOffset.left + "px", top:cityOffset.top + cityObj.outerHeight() + "px"}).slideDown("fast");
			$("body").bind("mousedown", onBodyDown);
		}
		function hideMenu() {
			$("#menuContent").fadeOut("fast");
			$("body").unbind("mousedown", onBodyDown);
		}
		function onBodyDown(event) {
			if (!(event.target.id == "menuBtn" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length>0)) {
				hideMenu();
			}
		}
		
		function initTree() {
			var setting = {
					view: {
						dblClickExpand: false
					},
					data: {
						simpleData: {
							enable: true
						}
					},
					callback: {
						beforeClick: beforeClick,
						onClick: onClick,
						asyncSuccess: zTreeOnAsyncSuccess,//异步加载成功的fun 
						asyncError: zTreeOnAsyncError, //加载错误的fun
					},async: { 
						enable: true, 
						url:"${ctx}/sysDept/deptTree",
						autoParam:["id"], 
						dataType: "json",//默认text 
						//type:"get",//默认post 
						dataFilter: filter //异步返回后经过Filter 
					}
				};
			
			function onClick(e, treeId, treeNode) {
				var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
				nodes = zTree.getSelectedNodes();
				if(nodes.length > 0) {
					var parentNameObj = $("#parentName");
					parentNameObj.attr("value", nodes[0].name);
					var parentDeptIdObj = $("#parentDeptId");
					parentDeptIdObj.attr("value", nodes[0].id);
				}
				hideMenu();
			}
			
			//treeId是treeDemo 
			function filter(treeId, parentNode, childNodes) { 
				if (!childNodes) return null; 
					for (var i=0, l=childNodes.length; i<l; i++) { 
						childNodes[i].name = childNodes[i].name.replace('',''); 
				} 
					return childNodes; 
			}
			
			function beforeClick(treeId, treeNode) {
				//var check = (treeNode && !treeNode.isParent);
				//if (!check) alert("只能选择城市...");
				return true;
			}
			function zTreeOnAsyncError(event, treeId, treeNode){ 
				alert("异步加载失败!"); 
			} 
			function zTreeOnAsyncSuccess(event, treeId, treeNode, msg){ 

			} 
			$.fn.zTree.init($("#treeDemo"),setting);
		}
		
		$(function(){
			$("#parentDeptId").val("${sysDept.parentDeptId}");
			$("#parentName").val("${sysDept.deptCnName}");
			
			initTree();
			//initTreeForRole();
			
			$("#parentName").click(function(){
				showMenu();
			});
			
			$("#roleName").click(function(){
				showMenuForRole();
			});
			
			// 验证
			seajs.use(["component/validate","component/tip"], function (validate,tip) {
				var ntip = function(){
					// 定义一个提示对象
					var t = new tip({
						content: 'hello tip',
						hasArrow: true,
						arrowOption: { dir: "left", position: { top:8 } },
						con: "body",
						hasCloseBtn: false,
						position: { my: "center", at: "center", of: "#tipcon" },
						css: { width: "120" }
					});
					return t;	
				};
			         	
				// 定义一个验证对象
				var d = new validate({
					con : "#sysDeptForm",// 验证容器
					onSubmit : "#addBtn",// 提交按钮
					eachInvalidField : function(res,field){// 验证不通过的处理
						var oldTip = field.data("tip");
						var tip;
						if(typeof oldTip == "undefined"){
							tip = ntip();
							field.data("tip",tip);
						}else{
							tip = oldTip;
						}
						tip.setContent(res.message);
						tip.setPosition({ my: "left center-15", at: "right+10 center", of: field });
						tip.show();
					},
					eachValidField : function(res,field){// 验证通过则隐藏提示
						var oldTip = field.data("tip");
						var tip;
						if(typeof oldTip == "undefined"){
						   
						}else{
							tip = oldTip;
							tip.hide();
						}
					}
				});
				// 设置拼装规则
				d.setValidateRule({ deptCnName : ["isBlank"] });
				d.setValidateRule({ deptEnName : ["isBlank"] });
				d.setValidateRule({ deptReferred : ["isBlank"] });
				d.setValidateRule({ deptAddress : ["isBlank"] });
				d.setValidateRule({ parentName : ["isBlank"] });
				// 绑定提交按钮
				d.bind("onsubmit",function(){
					var serializedForm = $("#sysDeptForm").serialize();
					$.post("${ctx}/sysDept/add", serializedForm, function (result) {
			            if ("succ" == result) {
			    			alert("操作成功");
							parent.replaceByUrl('${ctx}/sysDept/list');
							parent.layerClose(window.name);
			            }else {
			            	alert(result);
			            }
			        }, "json");
				});
			});	
		});
	</script>

</body>
</html>